import React, { Component, PropTypes } from 'react';
import { StyleSheet, Modal, TouchableOpacity } from 'react-native';

class ModalExt extends Component {
  static propTypes = {
    visible: PropTypes.bool,
    animationType: PropTypes.string,
    transparent: PropTypes.bool,
    onRequestClose: PropTypes.func,
  };
  render() {
    return (
      <Modal
        animationType={this.props.animationType}
        transparent={this.props.transparent}
        visible={this.props.visible}
        onRequestClose={this.props.onRequestClose}
      >
        <TouchableOpacity
          style={style.modal}
          disabled={!this.props.onPress}
          onPress={() => this.props.onPress()}
        >
          {this.props.children}
        </TouchableOpacity>
      </Modal>
    );
  }
}

const style = StyleSheet.create({
  modal: {
    flex: 1,
    backgroundColor: 'rgba(44,46,48,0.60)',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
});
export default ModalExt;
